<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESModule</title>
  <!-- 
  JavaScript 的 ES6（ECMAScript 2015）引入了模块化的概念，称为 ES 模块（ES Modules）。与之前的 CommonJS 和 AMD 模块系统相比，ES 模块具有更好的静态分析能力和更高的灵活性。
  一、基本概念
  1. 模块：模块是一个独立的代码单元，具有自己的作用域。模块可以导出变量、函数、类等，其他模块可以通过导入这些内容来使用。

  2. 文件：每个 JavaScript 文件都是一个模块。使用  `import`  和  `export`  语法来实现模块之间的依赖关系。

  二、导出（Export）
  1. 命名导出
  命名导出允许在一个模块中导出多个变量、函数或类。使用  `export`  关键字。
  // module.js
  export const name = '小明';
  export function greet() {
      console.log('Hello, ' + name);
  }
  2. 默认导出
  每个模块可以有一个默认导出，使用  `export default`  关键字。默认导出通常用于导出单一的值或对象。
  // module.js
  const person = {
      name: '小明',
      age: 25
  };

  export default person;
  三、导入（Import）
  使用  `import`  语句导入其他模块的内容。

  1. 导入命名导出
  // main.js
  import { name, greet } from './module.js';

  console.log(name); // 输出: 小明
  greet(); // 输出: Hello, 小明
  2. 导入默认导出
  // main.js
  import person from './module.js';

  console.log(person.name); // 输出: 小明
  3. 导入所有内容

  使用  `*`  可以一次性导入模块中的所有命名导出。
  // main.js
  import * as module from './module.js';

  console.log(module.name); // 输出: 小明
  module.greet(); // 输出: Hello, 小明
  四、模块的特点
  1. 静态导入：ES 模块的导入是静态的，意味着在编译时就可以确定模块的依赖关系。这使得工具可以进行更好的优化和静态分析。

  2. 作用域：模块中的变量、函数和类是私有的，只有通过导出才能在其他模块中访问。

  3. 异步加载：ES 模块支持动态导入，允许在运行时按需加载模块。
  // 动态导入
  import('./module.js')
      .then(module => {
          module.greet();
      });
  五、总结
  - 模块化：ES 模块为 JavaScript 提供了模块化的支持，使得代码组织更为清晰和可维护。
  - 导出与导入：使用  `export`  和  `import`  语法来实现模块之间的依赖关系。
  - 静态特性：静态导入使得编译时可以进行优化，增强了代码的可读性和可维护性。
  - 私有作用域：模块的内容默认是私有的，只有通过导出才能共享。
  -->
</head>
<body>
  
  <!-- 注意事项二: 在我们打开对应的html时, 如果html中有使用模块化的代码, 那么必须开启一个服务来打开 type="module" -->
  <script src="./foo.js" type="module"></script>
  <script src="./main.js" type="module"></script>

</body>
</html>